<template>
    <el-dialog class="importTask" title="导入任务" :visible.sync="showDialog" :close-on-click-modal="false" width="450px">
      <el-form ref="formData" :inline="true" :model="formData" label-width="120px" size="small">
        <el-form-item property="companyCode" label="单位名称：">
          <el-select style="width:250px;"  v-model="formData.companyCode" placeholder="请选择单位" @change="companyChange" clearable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item property="name" label="场站名称：">
          <el-select style="width:250px;"  v-model="formData.stationCode" placeholder="请选择场站" @change="stationChange" clearable>
            <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item property="name" label="选择数据：">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            :multiple="false"
            :show-file-list="false"
            :on-change="fileChange"
            :auto-upload="false">
            <el-input style="width:250px;" prefix-icon="el-icon-folder-add" placeholder="请选择数据" v-model="file && file.name"></el-input>
          </el-upload>
        </el-form-item>
        <el-form-item property="type" label="数据类型：">
            <el-radio-group style="width:250px;"  v-model="formData.type" placeholder="请选择场站">
            <el-radio v-for="item in typeList" :label="item.label" :key="item.label"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col class="text-center">
          <el-button @click="submit" type="primary" size="small">保存</el-button>
          <el-button @click="cancelClick" size="small">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
</template>

<script>
  import stations from "../../../api/stations"
  import manual from "../../../api/manual"
  import taskList from "../../../api/taskList";
  export default {
    name: "dialogImportTask",
    data() {
      return {
        showDialog: false,
        formData: {
          companyCode: "",
          stationCode: "",
          filename: ""
        },
        file: null,
        tree: [],
        fileList: [],
        typeList: [{label: "csv"}, {label: "xlsx"}],
        stationList: []
      }
    },
    methods: {
      show() {
        this.showDialog = true
        this.formData = {
          companyCode: "",
          stationCode: "",
          filename: ""
        }
        this.$nextTick(() => {
          this.getCompanyList()
        })
      },
      fileChange(file) {
        this.file = file.raw
      },
      companyChange() {
        this.formData.stationCode = ""
        this.getStationByCompany()
      },
      stationChange() {},
      getCompanyList() {
        stations.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getStationByCompany() {
        manual.getStationByCompany({
          companyCode: this.formData.companyCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      cancelClick() {
        this.showDialog = false
      },
      saveClick() {

      },
      submit() {
        if (!this.formData.companyCode) {
          this.$message.error('请选择所属单位')
          return
        }
        console.log("this.$refs.upload.uploadFiles[0]", this.$refs.upload.uploadFiles[0])
        if (!this.file) {
          this.$message.error('请选择上传文件')
          return
        }
        let formData = new FormData()
        formData.append('mfile', this.file);
        formData.append('companyCode', this.formData.companyCode)
        formData.append('stationCode', this.formData.stationCode)
        taskList.uploadInspectTaskInfo(formData).then(res => {
          if (res && res.data.code === 200) {
            this.formData = {
              type: 'xlsx',
              companyCode: ''
            }
            this.file = null
            this.showDialog = false
            this.$message.success(res.data.message)
            this.$emit("sendTaskMaintain")
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .importTask{
    .el-dialog__body{
      padding-left: 20px;
    }
  }
</style>
